<template>
	<view>
		<comHeader :config="navConfig"/>
		<!-- 选项卡头部 -->
		<view class="glmoreTabBox">
			<view class="glmoreTab">
				<view 
					v-for="(tab,index) in tabBars" 
					:key="tab.id" 
					:class="tabIndex==index ? 'active' : ''" 
					@click="tapTab(index)">
					{{tab.name}}
				</view>
			</view>
			<!-- <shopJoin /> -->
			<view v-if="tabIndex == 0">
				<view class="xinxi"><view class="SG"></view><i>选择公司信息</i></view>
				<view @tap="actionSheetTap" class="jingying">
					<view class="i">经营许可</view>
					<view class="text">选择经营许可</view>
					<view><image src="/static/jiantou.png"></image></view>
					<view class="line"></view>
				</view>
				<view class="leixing">
					<view class="i">公司类型</view>
					<view class="text">选择公司类型</view>
					<view><image src="/static/jiantou.png"></image></view>
					<view class="line"></view>
				</view>
			</view>
			<hotelJoin v-if="tabIndex == 1"/>
			<foodJoin v-if="tabIndex == 2"/>
			<view v-if="tabIndex == 3">
				<!-- <view class="xinxi"><view class="SG"></view><i>选择公司信息</i></view>
				<view @tap="actionSheetTap" class="jingying">
					<view class="i">经营许可</view>
					<view class="text">选择经营许可</view>
					<view><image src="/static/jiantou.png"></image></view>
					<view class="line"></view>
				</view>
				<view class="leixing">
					<view class="i">公司类型</view>
					<view class="text">选择公司类型</view>
					<view><image src="/static/jiantou.png"></image></view>
					<view class="line"></view>
				</view> -->
			</view>
		</view>
		
		
		
	</view>
</template>

<script>
	import shopJoin from '@/pages/my/join/shopJoin/shopjoin'
	import hotelJoin from '@/pages/my/join/hotelJoin/hotel'
	import foodJoin from '@/pages/my/join/foodJoin/foodJiaMeng'
	export default {
		components:{
			shopJoin,
			hotelJoin,
			foodJoin,
		},
		data() {
			return {
				navConfig:{
					comScroll:0,
					isFixed:false, //是否absolute布局
					left:{
						isShowLeft:true,
						leftGobackColor:'black', //左边返回icon颜色
					},
					mid:{
						isShowMid:true,
						text:'景区-商家入驻'
					},
					right:{
						text:'',
						isShowRight:false,
					}
				},
				curTabIndex: 0,
				tabIndex: 0 ,//默认选中第一个tab
				tabBars: [{
						name: '旅游景区'
					},
					{
						name: '宾馆入住'
					},
					{
						name: '美食小吃'
					},
					{
						name: '休闲娱乐'
					}
				],
				
				
			}
		},
		methods: {
			tapTab(index) {
				this.tabIndex = index;
			},
			actionSheetTap() {
				uni.showActionSheet({
					// title:'标题',
					itemList: ['个人身份证', '企业法人营业执照', '民办非企业单位登记证书', '事业单位法人证书','政府机关统一社会信用代码证书','社会团体法人证书'],
					success: (e) => {
						console.log(e.tapIndex);
						uni.navigateTo({
							url:'/pages/my/join/shopJoin/jingyingWrite'
						})
						uni.showToast({
							// url:'/pages/my/join/shopJoin/jingyingWrite',
							title:"点击了第" + e.tapIndex + "个选项",
							icon:"none"
						})
						
					}
				})
			}
		},
		onLoad(options) {
			this.tabIndex = options.state
		}
	}
</script>

<style>
	*{
		margin: 0;
		padding: 0;
	}
	
	i {
		font-style: normal;
	}
	.SG{
		width: 5upx;
		height: 23upx;
		opacity: 1;
		background: rgba(84,176,255,1);
		margin-left: 37upx;
		margin-top: -87upx;
		float: left;
	}
	.xinxi i{
		width: 200upx;
		height: 32upx;
		opacity: 1;
		font-size: 32upx;
		font-family: PingFang SC Regular;
		color: rgba(1,1,1,1);
		margin-left: 55upx;
		margin-top: -80upx;
		float: left;
	}
	.jingying .i{
		margin-left: 46upx;
		margin-top: 154upx;
		width: 100upx;
		height: 23upx;
		opacity: 1;
		font-size: 24upx;
		font-family: PingFang SC Regular;
		color: rgba(1,1,1,1);
	}
	.jingying .text{
		margin-top: 43upx;
		margin-left: 46upx;
		width: 180upx;
		height: 27upx;
		opacity: 1;
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: rgba(153,153,153,1);
		float: left;
	}
	.jingying image{
		width: 25upx;
		height: 25upx;
		/* line-height: 25upx; */
		float: left;
		margin-left: 680upx;
		color: #BBBBBB;
		margin-top: -20upx;
	}
	.line{
		margin-left: 52upx;
		margin-top: 27upx;
		width: 644upx;
		height: 1px;
		background: rgba(220,220,220,1);
		float: left;
	}
	.leixing .i{
		margin-left: 46upx;
		margin-top: 154upx;
		width: 100upx;
		height: 23upx;
		opacity: 1;
		font-size: 24upx;
		font-family: PingFang SC Regular;
		color: rgba(1,1,1,1);
	}
	.leixing .text{
		margin-top: 43upx;
		margin-left: 46upx;
		width: 180upx;
		height: 27upx;
		opacity: 1;
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: rgba(153,153,153,1);
		float: left;
	}
	.leixing image{
		width: 25upx;
		height: 25upx;
		/* line-height: 25upx; */
		float: left;
		margin-left: 680upx;
		color: #BBBBBB;
		margin-top: -20upx;
	}
	.line{
		margin-left: 52upx;
		margin-top: 27upx;
		width: 644upx;
		height: 1px;
		background: rgba(220,220,220,1);
		float: left;
	}
	/* 头部选项卡 */
	.glmoreTabBox {
		position: relative;
		margin-top: 190upx;
	}
	
	.glmoreTab {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-top: -82upx;
		margin-bottom: 40upx;
	}
	
	.glmoreTab>view {
		flex: 1;
		text-align: center;
		font-size: 24upx;
		color: #000000;
		line-height: 54upx;
		position: relative;
	}
	
	.glmoreTab .active {
		font-weight: bold;
	}
	
	.glmoreTab .active:before {
		content: "";
		width: 102upx;
		height: 3upx;
		background: linear-gradient(left, #8EC6FF, #6592F7);
		display: block;
		margin: auto;
		position: absolute;
		bottom: 0;
		left: 50%;
		margin-left: -51upx;
	}
	
	
	/* .con{
		width: 750upx;
		height: 731upx;
		background: rgba(255,255,255,1);
	}
	.idcard{
		width: 145upx;
		height: 28upx;
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: rgba(51,51,51,1);
		margin-left: 307upx;
		margin-top: 41upx;
	}
	.line{
		width: 720upx;
		height: 1upx;
		background: rgba(220,220,220,1);
		margin-left: 17upx;
		margin-top: 34upx;
	}
	.qiye{
		width: 240upx;
		height: 28upx;
		opacity: 1;
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: rgba(51,51,51,1);
		margin-left: 267upx;
		margin-top: 37upx;
	}
	.minban{
		width: 310upx;
		height: 28upx;
		opacity: 1;
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: rgba(51,51,51,1);
		margin-left: 239upx;
		margin-top: 37upx;
	}
	.shiye{
		width: 230upx;
		height: 28upx;
		opacity: 1;
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: rgba(51,51,51,1);
		margin-left: 268upx;
		margin-top: 37upx;
	}
	.zhengfu{
		width: 400upx;
		height: 28upx;
		opacity: 1;
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: rgba(51,51,51,1);
		margin-left: 202upx;
		margin-top: 37upx;
	}
	.shehui{
		width: 230upx;
		height: 28upx;
		opacity: 1;
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: rgba(51,51,51,1);
		margin-left: 276upx;
		margin-top: 37upx;
	}
	.tiao{
		width: 750upx;
		height: 11upx;
		opacity: 1;
		background: rgba(247,247,247,1);
	}
	.quxiao{
		width: 70upx;
		height: 28upx;
		opacity: 1;
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: rgba(51,51,51,1);
		margin-left: 242upx;
		margin-top: 32upx;
	} */
	
</style>
